<template>

 
  <PageContainer>
    <view class="container">
      <Header title="服务表单记录">
        <RecordSearch @confirm="handleConfirm" text="搜索表单标题"></RecordSearch>
      </Header>
      <Paglist
        v-model="dataList"
        :is-init-api="false"
        :parame="parame"
        @register="register"
        :scroll-top-bottom="260"
      >
        <view class="list-box">
          <template v-for="(item, index) in dataList" :key="index">
            <FormRecord
              :avatar-image="item.avatar"
              :name="item.userName"
              :title="item.title"
              :date-time-str="item.updateTime"
              :show-edit="item.canModify == CanModifyEnum.Yes"
              :deleted="item.deleted"
              @click="handleClick(item)"
              @edit="handleEdit(item)"
            ></FormRecord>
          </template>
        </view>
      </Paglist>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /* serviceFormRecord 服务表单记录 */
  import Header from '@/components/Header/index.vue';
  import PageContainer from '@/components/PageContainer/index.vue';
  import FormRecord from '../FormRecord/index.vue';
  import RecordSearch from '../RecordSearch/index.vue';
  import { onMounted, provide, reactive, ref } from 'vue';
  import type { IFormFillRecordList, IFormFillRecordListQuery } from '@/api/serviceForm/types';
  import { useConList } from '@/components/Paglist/useConList';
  import { CanModifyEnum, RecordTypeEnum } from '@/enums/serviceFormEnum';
  import Paglist from '@/components/Paglist/index.vue';

  const props = defineProps({
    api: { type: Function, default: () => {} },
    recordType: { type: Number, default: RecordTypeEnum.MY },
  });

  const emtis = defineEmits(['click', 'edit']);

  const parame = reactive<IFormFillRecordListQuery>({
    current: 1,
    size: 10,
    recordType: RecordTypeEnum.MY,
    title: '',
    updateTimegt: '',
    updateTimelt: '',
  });



  const dataList = ref<IFormFillRecordList[]>([]);
  const [register, { refresh }] = useConList();
  provide('api', props.api);
  onMounted(() => {
    parame.recordType = props.recordType;
    refresh();
  });

  const handleConfirm = ({ keyWord, daterange }: { keyWord: string; daterange: Array<string> }) => {
    dataList.value = [];
    parame.title = keyWord;
    parame.updateTimegt = daterange[0];
    parame.updateTimelt = daterange[1];
    refresh();
  };

  const handleClick = (item: IFormFillRecordList) => {
    emtis('click', item);
  };

  const handleEdit = (item: IFormFillRecordList) => {
    emtis('edit', item);
  };
</script>

<style lang="scss" scoped>
  .container {
    .list-box {
      display: flex;
      padding: 32rpx;
      flex-direction: column;
      gap: 24rpx;
    }
  }
</style>
